<template>
  <div class="bookies">
    <div class="title">{{languageJson.home.allBctype}}</div>
    <div class="bookies_content">
      <div class="item">
        <div class="AlibabaPuHuiTi_2_85_" style="color: #999">{{languageJson.home.bctype}}</div>
        <div class="AlibabaPuHuiTi_2_85_" style="color: #999">{{languageJson.home.odd}}</div>
      </div>
      <div class="item" v-for="(item, index) in itemdata.otherplat" :key="index">
        <div class="AlibabaPuHuiTi_2_65_" style="color: #999">{{ maps[item.bc_type] }}</div>
        <div class="AlibabaPuHuiTi_2_65_" style="color: #3711d8; font-weight: bold">{{ item.odd }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { http } from '@/utils/http'
const props = defineProps({
  itemdata: Object,
  dataindex: Number,
  pkindex: Number,
  activeoddsindex: Number,
})
const languageJson = inject('languageJson')
const languageType = inject('languageType')

const maps = ref({
  hga: languageJson.value.bctypes.hga,
  ps3838: languageJson.value.bctypes.ps3838,
  kaiyun: languageJson.value.bctypes.kaiyun,
  isn: languageJson.value.bctypes.isn,
  imsport: languageJson.value.bctypes.imsport,
  manbet165: languageJson.value.bctypes.anbet165,
  dxvip: languageJson.value.bctypes.dxvip,
})


const { dialogStore, dialogState } = inject('DialogStore')

let otherplatIntervalId

const getotherplatformoddlist = () => {
  clearInterval(otherplatIntervalId)
  if (dialogState.dialogArr[props.dataindex].show == true) {
    let body = {
      bc_type: 'hga',
      event_type: dialogState.dialogArr[props.dataindex].match.event_type,
      league_id: dialogState.dialogArr[props.dataindex].match.league_id,
      home_id: dialogState.dialogArr[props.dataindex].match.home_id,
      away_id: dialogState.dialogArr[props.dataindex].match.away_id,
      pk_odds_key:
        dialogState.dialogArr[props.dataindex].activeodds[props.activeoddsindex].data.odds[props.pkindex]
          .pk_odds_key,
      nav_data:
        dialogState.dialogArr[props.dataindex].activeodds[props.activeoddsindex].data.odds[props.pkindex]
          .nav_data,
      odd: dialogState.dialogArr[props.dataindex].activeodds[props.activeoddsindex].data.odds[props.pkindex]
        .odd,
      sport_type: dialogState.dialogArr[props.dataindex].match.sport_type,
    }

    http.post('/match/other_platform_odd_list', body).then(res => {
      let a = {
        total_stake: 0,
        place_data: [],
      }
      console.log(dialogState.dialogArr[props.dataindex].activeodds[props.activeoddsindex].order);
      
      res.data.forEach(item => {
        if (item.bc_type == 'hga') {
          item.min_odd = item.odd
          item.max_odd = 1000
          a.place_data.push(item)

          dialogState.dialogArr[props.dataindex].activeodds[props.activeoddsindex].order[0].place_data[0].min_odd = item.odd
        }
      })
      props.itemdata.otherplat = res.data
      clearInterval(otherplatIntervalId)
      otherplatIntervalId = setInterval(() => getotherplatformoddlist(), 3000)
    })
  }
}
onMounted(() => {
  otherplatIntervalId = setInterval(() => getotherplatformoddlist(), 3000)
})
</script>

<style lang="scss" scoped>
.bookies {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding-bottom: 4px;

  .title {
    font-family: AlibabaPuHuiTi_2_85_;
    font-size: 14px;
    font-weight: bold;
    color: #000;
  }

  .bookies_content {
    margin-top: 8px;
    display: flex;
    flex-direction: column;

    .item {
      width: 100%;
      display: flex;

      div {
        width: 50%;
        font-size: 12px;
        margin-bottom: 4px;
      }
    }
  }
}
</style>